<template>
  <div class="side">
    <Calendar
      v-model="vmDate"
      v-bind="$attrs"
    />
    <n-divider />
  </div>
</template>

<script lang="ts" setup>
  import Calendar from '@/components/Calendar/Calendar.vue'
  import { useVModel } from '@vueuse/core'

  const emits = defineEmits(['update:date'])

  const props = defineProps({
    date: {
      type: Date,
      required: true
    }
  })

  const vmDate = useVModel(props, 'date', emits)
</script>

<style scoped lang="scss">
  .side {
    background-color: #fff;
    width: 270px;
    padding: 16px;
    height: calc(100vh - 60px);
    box-sizing: border-box;
    border-right: 1px solid $border-color;
    &-bill {
      &__item {
        padding: 10px 16px;
        font-size: 12px;
        cursor: pointer;
        margin-bottom: $space-sm;
        &:hover {
          color: #18a058;
          background: rgba(24, 160, 88, 0.1);
        }
        &--select {
          color: #18a058;
          background: rgba(24, 160, 88, 0.1);
        }
      }
    }
  }
</style>
